<template>
  <div class="header">
    <h3>评论</h3>
    <div>
      <div class="input">
        <el-input
          placeholder="请输入内容"
          v-model="content"
          @focus="showTextarea"
          ref="customerInput"
          type="textarea"
        >
        </el-input>
      </div>

      <!-- 上传图片 和 提交按钮 -->
      <div class="issue">
        <span class="news" ref="p">
          <el-upload
            :action="$axios.defaults.baseURL + '/upload'"
            list-type="picture-card"
            :on-success="uploadImg"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="screen"
            name="files"
            :file-list="pics"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </span>

        <!-- 提交按钮 -->

        <span class="buttom">
          <el-button
            type="primary"
            icon="el-icon-check"
            circle
            @click="sendComment"
          ></el-button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  props: ["commentId"],
  data() {
    return {
      input: "",
      dialogImageUrl: "",
      dialogVisible: false,
      commentIds: "",
      from: {
        name: "",
      },
      follow: "",
      content: "",
      pics: [],
      post: "",
    };
  },

  created() {
    eventBus.$on("callReply", (commentId) => {
      this.commentIds = commentId;
      console.log("输入框知道了评论被点击");
      this.showTextarea();
    });
    // 可以监听这个实例触发的时间
    // 有两个参数
    // 一个事件名
    // 回调函数, 一样可以接受数据
  },

  methods: {
    //   提交评论按钮
    sendComment() {
      this.handleRemove();
      this.$axios({
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        method: "post",
        url: `/comments`,
        data: {
          content: this.content,
          follow: this.commentIds,
          post: this.$route.query.id,
          pics: this.pics,
        },
      }).then((res) => {
        console.log(res.data);

        if (res.data.message == "提交成功") {
          this.$emit("reloadComment");
          this.content = "";
          this.pics = [];
          this.$message.success("评论成功");
        } else {
          this.$message.warning("请先输入内容");
        }
      });
    },
    showTextarea() {
      console.log("触发了");
      this.$nextTick(function () {
        this.$refs.customerInput.$el.querySelector("input").focus();
      });
      this.$nextTick(() => {
        this.$refs.customerInput.focus();
      });
    },

    //判断上传文件类型
    screen(flies) {
      let table = flies.type.slice(0, 5);
      if (table === "image") {
        return true;
      } else {
        this.$message.success("文件上传失败");
        return false;
      }
    },
    //上传图片
    uploadImg(res, b) {
      console.log(b);

      this.pics.push(res[0]);
      console.log(this.pics);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  h3 {
    font-weight: normal;
    margin-bottom: 20px;
  }

  .issue {
    margin: 20px 0;
    width: 700px;
    display: flex;
    .news {
      flex: 1;
    }
    .buttom {
      width: 30px;
      height: 30px;
    }
  }
}
</style>